<template>
  <div class="login-panel">
    <h2 class="title">后台管理系统</h2>
    <div class="switch-login-method">
      <!-- vue3是怎么进行父子组件通信的？子组件发射的时间父组件怎么监听的？v-model是怎么被子组件修改值的？ -->
      <!-- 此处：v-model可以双向绑定是因为，v-model 是 Vue 提供的一个语法糖，它本质上是 :message 和 @update:message 的组合; 当你使用 v-model:message="someValue" 时，Vue 会自动将 someValue 绑定到子组件的 message 属性，并监听 update:message 事件来更新 someValue。-->
      <el-tabs stretch type="border-card" v-model="activeName">
        <!-- v-model="activeName" 等价于 v-model:activate-name="activeName" -->
        <el-tab-pane name="account">
          <template v-slot:label>
            <div class="label">
              <el-icon style="margin-right: 5px;">
                <User />
              </el-icon>
              <span>账号登录</span>
            </div>
          </template>
          <pane-account ref="accountRef" />
        </el-tab-pane>
        <el-tab-pane name="mobile">
          <template #label>
            <div class="label">
              <el-icon style="margin-right: 5px;">
                <Cellphone />
              </el-icon>
              <span>手机登录</span>
            </div>
          </template>
          <pane-phone />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="manage-password">
      <el-checkbox v-model="isRemember">记住密码</el-checkbox>
      <el-link type="primary">忘记密码</el-link>
    </div>
    <el-button type="primary" class="button-login" @click="loginClick">立即登录</el-button>
  </div>
</template>

<script setup lang="ts">
import { User } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';
import PaneAccount from './pane-account.vue';
import PanePhone from './pane-phone.vue';
import { localCache } from '@/utils/cache';

const IS_REMEMBER = 'isRemember'
const isRemember = ref<boolean>(localCache.getCache(IS_REMEMBER) ?? false)
watch(isRemember, (newValue) => {
  localCache.setCache(IS_REMEMBER, newValue)
})

const activeName = ref<'account' | 'mobile'>('account')

// PaneAccount：其实是构造器  <PaneAccount />：这个才是实例
// 1. typeof PaneAccount: 获取 PaneAccount 组件的构造函数类型，而不是其实例类型
// 2. InstanceType 是一个 TypeScript 工具类型，用于从构造函数类型中提取实例类型
// 注解： 获取类型为 PaneAccount 组件的实例类型  用于在父组件中获取 PaneAccount 子组件的实例引用，从而可以调用子组件的方法或访问其属性。
const accountRef = ref<InstanceType<typeof PaneAccount>>()
function loginClick() {
  if (activeName.value === 'account') {
    accountRef.value?.submitForm(isRemember.value)
  } else {
    console.log('mobile');
  }
}

</script>
<style scoped lang="less">
.login-panel {
  width: 330px;

  .title {
    text-align: center;
    margin-bottom: 15px;
  }

  .switch-login-method {
    .label {
      // display: flex;
      // justify-content: center;
      // align-items: center;
    }
  }

  .manage-password {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
  }

  .button-login {
    margin-top: 10px;
    width: 100%;
  }
}
</style>
